
<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>王佳佳的Website</title><script async src="http://c.cnzz.com/core.php"></script>
		<meta name="description" content="Decorative &amp; interactive isometric &amp; 3D grids." />
		<meta name="keywords" content="isometric, grid, images, masonry, perspective" />
		<meta name="author" content="jq22" />
		<link rel="stylesheet" type="text/css" href="Home/css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="Home/css/demo.css" />
		<link rel="stylesheet" type="text/css" href="Home/css/component.css" />
		<script src="Home/js/modernizr.custom.js"></script>
		<link rel="shortcut icon" href="favicon.jpg" />
<script type="text/javascript">
hQGHuMEAyLn('.adsbygoogle,.fdad,.inner > .add');</script></head>
	<body class="demo-2">
		<main>
			<header class="jq22-header">
				<h1>王佳佳的Website</h1>
				<p>欲望以提升热忱，毅力以磨平高山。<p>
				<nav class="jq22-demos">
					<a href="index.html">动中有静</a>
					<a class="current-demo" href="index2.html">静中有动</a>
				</nav>
				
			</header>
			<section class="section section--intro">
				<div class="isolayer isolayer--deco1 isolayer--shadow">
					<ul class="grid">
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/1.png" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/2.png" alt="02" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/3.png" alt="03" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/4.png" alt="04" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/5.png" alt="05" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/6.png" alt="06" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/7.png" alt="07" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/8.png" alt="08" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/9.png" alt="09" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/10.png" alt="10" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/1.png" alt="01" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/2.png" alt="02" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/3.png" alt="03" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/4.png" alt="04" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/5.png" alt="05" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/6.png" alt="06" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/7.png" alt="07" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/8.png" alt="08" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/9.png" alt="09" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/10.png" alt="10" /></a>
						</li>
					</ul>
				</div>
			</section><!--/intro-->
			<section class="interval">
				<p class="interval__text">Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. <em>&mdash; <a href="https://en.wikipedia.org/wiki/Isometric_projection">Wikipedia</a></em></p>
				<a class="pater" href="https://goo.gl/KArLiy">
					<h2 class="pater__title" aria-label="PageCloud"><img src="Home/img2/PageCloud_logo.svg" alt="PageCloud Logo"/></h2>
					<p class="pater__desc">Take control of your website with features you won't find anywhere else. Find out why PageCloud is the world's most advanced website creator today!</p>
				</a>
			</section>
			<section class="section section--right section--portraits">
				<h2 class="section__heading">Celebration <em>of</em> Shapes</h2>
				<p class="section__subtitle">Even whilst the arched or doubled hypocotyl is still beneath the ground, it circumnutates as much as the pressure of the surrounding soil will permit.</p>
				<div class="isolayer isolayer--deco2">
					<ul class="grid">
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/1.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/1.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/10.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/8.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/5.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/1.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/5.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/11.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/8.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/5.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/9.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/7.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/7.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/8.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/11.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/10.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/8.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/9.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/1.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/9.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/10.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/5.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/11.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/10.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/1.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/1.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/10.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/8.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/5.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/1.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/11.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/8.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/5.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/9.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/7.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/7.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/11.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/10.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/8.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/9.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/1.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/9.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/5.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/11.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/10.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/7.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/7.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/11.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/10.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/8.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/9.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/1.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/9.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/5.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/11.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/10.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/7.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/3.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/7.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/11.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/10.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/8.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/9.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/6.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/4.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/1.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/9.jpg" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<img class="grid__img layer" src="Home/img2/other/5.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/2.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/11.jpg" alt="01" />
								<img class="grid__img layer" src="Home/img2/other/10.jpg" alt="01" />
							</a>
						</li>
					</ul>
				</div>
			</section><!--/portraits-->
			<section class="interval">
				<p class="interval__text">Axonometric projection is a type of parallel projection used for creating a pictorial drawing of an object, where the object is rotated along one or more of its axes relative to the plane of projection. <em>&mdash; <a href="https://en.wikipedia.org/wiki/Axonometric_projection">Wikipedia</a></em></p>
			</section>
			<section class="section section--cards">
				<h2 class="section__heading">Symmetric Wisdom</h2>
				<p class="section__subtitle">It is to this violence of the rain that we must attribute the verdure at the bottom of the thickest woods.</p>
				<div class="isolayer isolayer--deco3">
					<ul class="grid">
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#">
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
								<div class="layer"><span class="decoletter">A</span><span class="deconumber">23</span></div>
							</a>
						</li>
					</ul>
				</div>
			</section>
			<section class="interval">
				<p class="interval__text">Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. <em>&mdash; <a href="https://en.wikipedia.org/wiki/Isometric_projection">Wikipedia</a></em></p>
			</section>
			<section class="section section--shots section--right">
				<h2 class="section__heading">Format <em>is</em> Everything</h2>
				<p class="section__subtitle">To raise new questions, new possibilities, to regard old problems from a new angle, requires creative imagination and marks real advance in science.</p>
				<div class="isolayer isolayer--deco4">
					<ul class="grid">
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/1.png" alt="01" />
							</a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/2.png" alt="02" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/3.png" alt="03" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/4.png" alt="04" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/5.png" alt="05" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/6.png" alt="06" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/7.png" alt="07" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/8.png" alt="08" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/9.png" alt="09" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/10.png" alt="10" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/1.png" alt="01" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/2.png" alt="02" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/3.png" alt="03" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/4.png" alt="04" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/5.png" alt="05" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/6.png" alt="06" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/7.png" alt="07" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/8.png" alt="08" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/9.png" alt="09" /></a>
						</li>
						<li class="grid__item">
							<a class="grid__link" href="#"><div class="layer"></div><div class="layer"></div><div class="layer"></div><img class="grid__img layer" src="Home/img2/10.png" alt="10" /></a>
						</li>
					</ul>
				</div>
			</section>
			
		</main>
		<script src="Home/js/imagesloaded.pkgd.min.js"></script>
		<script src="Home/js/masonry.pkgd.min.js"></script>
		<script src="Home/js/dynamics.min.js"></script>
		<script src="Home/js/classie.js"></script>
		<script src="Home/js/main.js"></script>
		<script>
		(function() {
			function getRandomInt(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}

			new IsoGrid(document.querySelector('.isolayer--deco1'), {
				transform : 'translateX(33vw) translateY(-340px) rotateX(45deg) rotateZ(45deg)',
				stackItemsAnimation : {
					properties : function(pos) {
						return {
							translateZ: (pos+1) * 30,
							rotateZ: getRandomInt(-4, 4)
						};
					},
					options : function(pos, itemstotal) {
						return {
							type: dynamics.bezier,
							duration: 500,
							points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}],
							delay: (itemstotal-pos-1)*40
						};
					}
				}
			});
			
			new IsoGrid(document.querySelector('.isolayer--deco2'), {
				perspective: 3000,
				transform : 'translateY(-150px) rotateX(55deg) rotateZ(-45deg)',
				stackItemsAnimation : {
					properties : function(pos) {
						return {
							translateX: getRandomInt(-60, 60),
							translateY: getRandomInt(-60, 60),
							rotateZ: getRandomInt(-10, 10)
						};
					},
					options : function(pos, itemstotal) {
						return {
							type: dynamics.bezier,
							duration: 800,
							points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}],
							delay: (itemstotal-pos-1)*20
						};
					}
				}
			});
			
			new IsoGrid(document.querySelector('.isolayer--deco3'), {
				transform : 'translateX(40vw) translateY(100px) rotateX(15deg) rotateY(0) rotateZ(40deg)',
				stackItemsAnimation : {
					properties : function(pos) {
						return {
							rotateY: pos * -15
						};
					},
					options : function(pos, itemstotal) {
						return {
							type: dynamics.bezier,
							duration: 500,
							points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}],
							delay: (itemstotal-pos-1)*40
						};
					}
				}
			});
			
			new IsoGrid(document.querySelector('.isolayer--deco4'), {
				perspective: 3000,
				transform : 'translate3d(-200px,-200px,0) scale3d(0.8,0.8,1) rotateY(45deg) rotateZ(-10deg)',
				stackItemsAnimation : {
					properties : function(pos) {
						return {
							rotateX: (pos+1) * -15
						};
					},
					options : function(pos, itemstotal) {
						return {
							type: dynamics.spring,
							delay: (itemstotal-pos-1)*30
						};
					}
				},
				onGridLoaded : function() {
					classie.add(document.body, 'grid-loaded');
				}
			});
		})();
		</script>
	</body>
</html>
